<template>
    <div style="margin: 50px auto; width: 70%; font-size: 20px;color: black">
        <div style="margin-top: 15px;">收货地址：<input type="text" v-model="address" style="width: 400px;height:30px"></div>

        <div style="margin-top: 15px;">
            <input type="radio" v-model="pay_type" value="1">支付宝&emsp;&emsp;
            <input type="radio" v-model="pay_type" value="2">微信
        </div>

        <div style="margin-top: 15px;">
            <table style="width: 100%">
                <tr>
                    <td>订单号</td>
                    <td>名称</td>
                    <td>数量</td>
                    <td>单价</td>
                    <td>小计</td>
                </tr>
                <tr v-for="order in order_list" :key="order.id">
                    <td>{{order.out_trade_no}}</td>
                    <td>{{order.goods_name}}</td>
                    <td>{{order.counter}}</td>
                    <td>{{order.price}}</td>
                    <td>{{order.counter * order.price}}</td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
            
                    <td colspan="2">总价：{{total}}</td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
            
                    <td colspan="2">
                        <button style="width: 100px; height: 35px; font-size: 20px" @click="payment">去支付</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            out_trade_no: this.$route.query.out_trade_no,
            base_url: 'http://127.0.0.1:8000',
            token: localStorage.getItem('token'),
            order_list: [],
            total: 0,
            pay_type: 1,
            address: ''
        }
    },
    methods: {
        // 去支付
        payment() {
            let form_data = new FormData()
            form_data.append('out_trade_no', this.out_trade_no)
            form_data.append('address', this.address)
            form_data.append('token', this.token)
            form_data.append('pay_type', this.pay_type)
            form_data.append('total', this.total)
            axios({
                url: this.base_url + '/goods/payment/',
                method: 'post',
                data: form_data
            }).then(res => {
                console.log(res.data)
                if(res.data.code == 200) {
                    window.location.href = res.data.pay_url
                }
            })
        },
        getOrderInfo() {
            axios({
                url: this.base_url + '/goods/order_info/?token=' + this.token + '&out_trade_no=' + this.out_trade_no
            }).then(res => {
                console.log(res.data)
                this.order_list = res.data.data
                this.total = res.data.total

            })
        }
    },
    created() {
        this.getOrderInfo()
    }
}
</script>

<style scoped>

</style>
